<template>
  <div>
    <h1>holler word1</h1>
    <div>
      <el-form
        :model="numberValidateForm"
        ref="numberValidateForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="年龄"
          prop="age"
          :rules="[
            { required: true, message: '年龄不能为空' },
            { type: 'number', message: '年龄必须为数字值' },
          ]"
        >
          <el-input
            type="age"
            v-model.number="numberValidateForm.age"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('numberValidateForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('numberValidateForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { verify } from "@/api";
export default {
  // 引入接口函数
  data() {
    return {
      numberValidateForm: {
        age: "",
      },
    };
  },
  // 在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
  beforeCreate: function () {},
  // 在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。
  beforeMount() {
    localStorage.setItem("token", "cesi");
  },

  // 在挂载开始之前被调用：相关的 render 函数首次被调用。

  // 该钩子在服务器端渲染期间不被调用。
  created() {
    localStorage.setItem("token", "cesi");
  },
  //   实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。

  // 注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick：
  mounted: function () {
    this.$nextTick(function () {
      // 仅在整个视图都被渲染之后才会运行的代码
    });
  },
  // 在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。
  // 该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行。
  beforeUpdate: function () {},
  // 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
  // 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
  // 注意，updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.$nextTick：
  updated: function () {
    this.$nextTick(function () {
      //  仅在整个视图都被重新渲染之后才会运行的代码
    });
  },
  // 被 keep-alive 缓存的组件激活时调用。该钩子在服务器端渲染期间不被调用。
  activated:function(){

  },
    // 被 keep-alive 缓存的组件失活时调用。该钩子在服务器端渲染期间不被调用。
  deactivated:function(){

  },
  // 实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。
  beforeDestroy:function(){

  },
  // 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。该钩子在服务器端渲染期间不被调用。
  destroyed:function(){

  },
  // 在捕获一个来自后代组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
  // 你可以在此钩子中修改组件的状态。因此在捕获错误时，在模板或渲染函数中有一个条件判断来绕过其它内容就很重要；不然该组件可能会进入一个无限的渲染循环。
  errorCaptured:function(){

  },

  methods: {
    submitForm(fromName) {
      this.$refs[fromName].validate((valid) => {
        if (valid) {
          // 请求后端接口
          verify(this.demo).then((res) => {
            console.log("测试接口数据", res);
            if (res.code == 200) {
              // 成功逻辑
              console.log(res.data);
            } else {
              // 失败逻辑
            }
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style >
</style>

